<template>
  <view>
    <view class="d-flex history-item" v-for="(item, index) in goodsList" :key="index" @click="navToGoodsDetail(item)" @longpress="handleDelete(item)">
      <image :src="item.image" mode="aspectFill" class="cover"></image>
      <view class="d-flex direction-column justify-between">
        <text class="">{{item.name}}</text>
        <view class="d-flex justify-between align-items-center">
          <view class="d-flex align-items-end price"><text>{{item.price}}</text></view>
          <view class="d-flex align-items-end samp">
            <text>已售</text>
            <text style="text-align:right;margin-right: 1upx;">{{item.sales}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
	mapState,
} from 'vuex';
export default {
  data() {
    return {
		headerPosition: 'fixed',
		headerTop: '0px',
		loadingType: 'more', //加载更多状态
		goodsList:[],
		page:1
	};
  },
  computed: {
  	...mapState('user',['token']),
  },
  onPageScroll(e) {
  	//兼容iOS端下拉时顶部漂移
  	if (e.scrollTop >= 0) {
  		this.headerPosition = 'fixed';
  	} else {
  		this.headerPosition = 'absolute';
  	}
  },
  //下拉刷新
  onPullDownRefresh() {
	this.page=1;
	this.loadData('refresh');
  },
  //加载更多
  onReachBottom() {
  	if(this.loadingType =='more'){
  		this.page=this.page+1;
  		this.loadData();
  	}
  	
  },
  onLoad() {
  	// #ifdef H5
  	this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight + 'px';
  	// #endif
  	this.loadData('refresh');
  },
  onShow() {
  	if(!this.token){
  		return uni.navigateTo({
  			url:'/pages/public/login'
  		})
  	}
  },
  methods: {
	loadData(type='add',loading){
		const hide = this.$loading('数据加载中...');
		if (type === 'add') {
			if (this.loadingType === 'nomore') {
				return;
			}
			this.loadingType = 'loading';
		} else {
			this.loadingType = 'more';
		}
		var param={
			token:this.token,
			page: this.page
		}
		this.$ajax.get('member/mycollect',param).then(data=>{
			console.log(data.data);
			if(0==data.error){
				let num = data.data.length;
				if (type === 'refresh') {
					this.goodsList = data.data;
				}else{
					this.goodsList = this.goodsList.concat(data.data);
				}
				this.loadingType = num < 10 ? 'nomore' : 'more';
				if (type === 'refresh') {
					if (loading == 1) {
					} else {
						uni.stopPullDownRefresh();
					}
				}
				hide();
			}
		})
	},
	//详情
	navToGoodsDetail(item) {
		return uni.navigateTo({
			url: `/pages/product/product?data=${JSON.stringify({
				goods: item
			})}`
		});
	},
    handleDelete(item) {
		uni.showModal({
			content: '确定要删除么',
			success: (e)=>{
				if(e.confirm){
					var param={token:this.token,goods_id:item.id};
					this.$ajax.get('member/removecollect',param).then(data=>{
						if(0==data.error){
							setTimeout(()=>{
								this.loadData('refresh')
							}, 200)
						}
					})
				}
			}
		});	
    }
  }
};
</script>

<style lang="scss">
.history-item {
  background-color: #ffffff;
  padding: 20rpx;
  &:not(:last-child) {
    border-bottom: 1px solid #ddd;
  }
  .cover {
    width: 200rpx;
    height: 160rpx;
    margin-right: 20rpx;
  }
  .samp {
    font-size: 24rpx;
    color: $font-color-light;
  }
  .price {
    font-size: $font-lg;
    color: $uni-color-primary;
    line-height: 1;
    &:before {
      content: '￥';
      font-size: 26rpx;
    }
  }
}
</style>
